<template>
  <section>
    <div class="warp1">
      <ul class="item">
      <li>
        <div class="item-div" style="padding: 15px; margin: 0px;">
          <span class="title">合约名称</span>
          <span class="date">合约地址</span>
        </div>
      </li>
    </ul>
    </div>
    <vue-seamless-scroll :data="list" class="warp" :class-option="classOption">
      <ul class="item">
        <li v-for="(item, index) in list" :key="index">
          <div class="item-div" style="padding: 15px; margin: 0px;">
            <span class="title" v-text="item.name"></span>
            <span class="date" v-text="item.address"></span>
          </div>
        </li>
      </ul>
    </vue-seamless-scroll>
  </section>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  name: 'Example01Basic',
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      list: [
        { name: '加工合约', address: '0x62543B2dFf3f322756d1356bE88a4a88123Bcd4e' }, // 加工合约
        { name: '收购合约', address: '0x6F66e34c77486D17Da5fd931F3e2c156D14A549A' }, // 收购合约
        { name: '打包合约', address: '0xa30dB3e4cf362ED1C2044372b790809e06E05995' }, // 打包合约
        { name: '包装合约', address: '0x8282fDa468507696d2a0D33aEdA9453a3c6A78AB' }, // 包装合约
        { name: '检测合约', address: '0xF59120cb280006c4b48D41Ca59f113233c183Be5' }, // 检测合约
        { name: '商品合约', address: '0xE1347dEaF0d9EBB30b64E75a3E25f7Ec0e17bde9' }, // 商品合约
        { name: '农户合约', address: '0xe1fdf536e6Fb8aD47F09a94B2bAC96f5Fae40be2' }, // 农户合约
        { name: '加工环节合约', address: '0xE1347dEaF0d9EBB30b64E75a3E25f7Ec0e17bde9' }, // 加工环节合约
        { name: '发货合约', address: '0x9173BC96f0da3537388907d6B720637FDf36b2b2' }, // 发货合约
        { name: '种植合约', address: '0x5740183793F07892028B4d01a470f8Aefc502763' } // 种植合约
      ],
      classOption: {
        direction: 0,
        step: 0.1,
        // singleHeight: 0
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.warp1{
  height: 100px;
  width: 100%;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .item-div {
        display: flex;
        align-items: flex-start;
        width: 100%;
        color: #606266;
        font-size: 14px;
        border-bottom: 1px solid #e5e1e1; // 将 #000000 替换为你想要的颜色
        flex-wrap: wrap; // 使子元素在溢出时换行

        .title,
        .date {
          word-wrap: break-word; // 使长单词在容器边界处换行
          word-break: break-all; // 强制在任意字符处换行
          flex: 1 1 auto; // 允许span在需要时换行
          min-width: 0; // 防止 flex 元素超出容器宽度
        }
        .title {
          width: 80px;
          text-align: left;
          flex: 1;
        }
        .date {
          width: 210px;
          text-align: center;
        }
      }
    }
  }
}
.warp {
  height: 180px;
  width: 100%;
  margin: 0 auto;
  // margin-top: 20px;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .item-div {
        display: flex;
        align-items: flex-start;
        width: 100%;
        color: #606266;
        font-size: 14px;
        border-bottom: 1px solid #e5e1e1; // 将 #000000 替换为你想要的颜色
        flex-wrap: wrap; // 使子元素在溢出时换行

        .title,
        .date{
          word-wrap: break-word; // 使长单词在容器边界处换行
          word-break: break-all; // 强制在任意字符处换行
          flex: 1 1 auto; // 允许span在需要时换行
          min-width: 0; // 防止 flex 元素超出容器宽度
        }

        .title {
          width: 80px;
          text-align: left;
          flex: 1;
        }

        .date {
          width: 210px;
          text-align: center;
        }
      }
    }
  }
}
</style>
